<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="js/jquery-3.3.1.js"></script>
  <style>
    .audio-wrapper {
      border-radius: 35px;
      background-color: #fcfcfc;
      margin: 10px auto;
      /*max-width: 670px;*/
      width: 90%;
      height: 70px;
      border: 1px solid #e0e0e0;
      position: fixed ;
      left: 5%;
      top: 85%;
      z-index: 100;
    }

    .audio-left {
      float: left;
      text-align: center;
      width: 15%;
      height: 100%;
    }

    .audio-left img {
      width: 40px;
      position: relative;
      top: 15px;
      margin: 0;
      display: initial; /* 解除与app的样式冲突 */
      cursor: pointer;
    }

    .audio-right {
      margin-right: 2%;
      float: left;
      width: 70%;
      height: 100%;
    }

    .audio-right p {
      font-size: 15px;
      height: 35%;
      margin: 8px 0;
      /* 歌曲名称只显示在一行，超出部分显示为省略号
         */
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      max-width: 243px;
      /*
         要适配小屏幕手机，所以最大宽度先设小一点，后面js根据屏幕大小重新设置 */
    }

    .progress-bar-bg {
      background-color: #d9d9d9;
      position: relative;
      height: 4px;
      cursor: pointer;
    }

    .progress-bar {
      background-color: #33cabb;
      width: 0;
      height: 4px;
    }

    .progress-bar-bg span {
      content: " ";
      width: 10px;
      height: 10px;
      border-radius: 50%;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      background-color: #33cabb;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -5px;
      margin-left: -5px;
      cursor: pointer;
    }

    .audio-time {
      overflow: hidden;
      margin-top: -1px;
    }

    .audio-length-total {
      float: right;
      font-size: 12px;
    }

    .audio-length-current {
      float: left;
      font-size: 12px;
    }
    .audio-list{
      float: left;
      margin-top: 30px ;
      margin-left: 0px;
    }
    .audio-musiclist{
      z-index: 1000;
      display: none;
      width: 35%;
      border: 1px solid #e0e0e0;
      position: fixed ;
      left: 60%;
      right: 5%;
      top: 70%;
      bottom: 14%;
      overflow: hidden;
      background-repeat: repeat-y;
    }
    #list-contain{
      padding-left: 20px;
      background-color: white;
      height: 100px;
    }
    #list-top {
      background-color: #33cabb;
    }
    /*!*滚动条样式*!*/
    /*#list-contain -webkit-scrollbar {*/
    /*  !*滚动条整体样式*!*/
    /*  width:4px;*/
    /*  !*高宽分别对应横竖滚动条的尺寸*!*/
    /*  height:4px;*/
    /*}*/
    /*#list-contain -webkit-scrollbar-thumb {*/
    /*  !*滚动条里面小方块*!*/
    /*  border-radius:5px;*/
    /*  -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.15);*/
    /*  background:rgba(0,0,0,0.15);*/
    /*}*/
    /*#list-contain -webkit-scrollbar-track {*/
    /*  !*滚动条里面轨道*!*/
    /*  -webkit-box-shadow:inset 0 0 5px rgba(0,0,0,0.1);*/
    /*  border-radius:0;*/
    /*  background:rgba(0,0,0,0.1);*/
    /*}*/
  </style>

</head>
<body>
<div class="audio-musiclist" id="audio-musiclist">
  <div id="list-top">
      <p style="margin-bottom: 0px">播放列表</p>
  </div>
  <div id="list-contain" style="overflow-y: scroll; overflow-x: hidden;">
    <ul id="musiclist">
    </ul>
  </div>
</div>
<div class="audio-wrapper">
  <audio>
    <source id="musicaudio" src="" type="audio/mpeg">
  </audio>
  <div class="audio-left">
    <img id="audioPre"  src="../images/pre.png">
    <img id="audioPlay" src="../images/play2.png">
    <img id="audioNext" src="../images/next.png">
  </div>
  <div class="audio-right"><p id="musicnameaudio" style="max-width: 536px;"></p>
    <div class="progress-bar-bg" id="progressBarBg">
      <span id="progressDot"></span>
      <div class="progress-bar" id="progressBar"></div>
    </div>
    <div class="audio-time"><span class="audio-length-current" id="audioCurTime">00:00</span>
      <span id="totalTime" class="audio-length-total">00:00</span></div>

  </div>
  <div class="audio-list" onclick="showorhidden()">
    <img src="../images/list.png" width="20px" height="20px" alt="">
  </div>
</div>

</body>

<script>
  var audio = $('audio')[0];
  //显示隐藏播放列表
  function showorhidden(){
    if ($("#audio-musiclist").css("display")==="none"){
      $("#audio-musiclist").css("display","block");
      loadlist();
    }
    else {
      $("#audio-musiclist").css("display","none")

    }
  }
  function loadlist(){
    $.post(
            "/music/music/showMusicList",{},
            function (data){
              console.log(data)
              if (data==null){
                $("#musiclist").html("歌单中未有歌曲")
              }
              else {
                var li = "";
                for (var i = 0; i < data[1].length; i++) {
                  if(data[0].mid==data[1][i].mid){
                  li+="<li><p style='font-weight: bold' onclick='insertMusic("+data[1][i].mid+")'>"+data[1][i].musicname+"</p></li>"
                }else {
                    li+="<li><p onclick='insertMusic("+data[1][i].mid+")'>"+data[1][i].musicname+"</p></li>"
                  }
                }
                $("#musiclist").html(li)
              }
            }
    )
  }
  function clickmusicplay_pause() {
    $('#audioPlay').attr('src', '../images/pause2.png');
    // 开始播放当前点击的音频
    audio.load();
    audio.play();

    audio.oncanplay=function (){
      $('#totalTime').html(transTime(audio.duration))
    }


  }
  function insertMusic(mid){
    console.log("进入add")
    $.post(
            "/music/music/addMusic",{mid:mid},
            function (data){
              clickmusicplay_pause();
              loadlist();
              console.log("../"+data.musicpath)
              $("#musicaudio").attr("src","../"+data.musicpath);
              $("#musicnameaudio").html(data.musicname);
            }
    )

  }
  function changelist1(){
    var mlid=getParameter("mlid");
    $.post(
            "/music/music/changelist",{mlid:mlid},function (data) {
              clickmusicplay_pause();
              loadlist();
              console.log("../"+data.musicpath)
              $("#musicaudio").attr("src","../"+data.musicpath);
              $("#musicnameaudio").html(data.musicname);
            }
    )
  }
  function changelist(mlid){

    $.post(
            "/music/music/changelist",{mlid:mlid},function (data) {
              clickmusicplay_pause();
              loadlist();
              console.log("../"+data.musicpath)
              $("#musicaudio").attr("src","../"+data.musicpath);
              $("#musicnameaudio").html(data.musicname);
            }
    )
  }
  //点击上一首，
  $('#audioPre').click(function (){
    $.post(
            "/music/music/MusicPre",{},
            function (data){
              clickmusicplay_pause();
              console.log("../"+data.musicpath)
              loadlist();
              $("#musicaudio").attr("src","../"+data.musicpath);
              $("#musicnameaudio").html(data.musicname);
            }
    )
  })
  $('#audioNext').click(function (){
    $.post(
            "/music/music/MusicNext",{},
            function (data){
              clickmusicplay_pause();
              console.log("../"+data.musicpath)
              loadlist();
              $("#musicaudio").attr("src","../"+data.musicpath);
              $("#musicnameaudio").html(data.musicname);
            }
    )
  })
  // 点击播放/暂停图片时，控制音乐的播放与暂停
  $('#audioPlay').click(function () {

    if (audio.paused) {
      // 开始播放当前点击的音频
      audio.load();
      audio.play();
      audio.oncanplay=function (){
        $('#totalTime').html(transTime(audio.duration))
      }
      $('#audioPlay').attr('src', '../images/pause2.png');
    } else {
      audio.pause();
      $('#audioPlay').attr('src', '../images/play2.png');
    }
  });
  /** * 播放完成时把进度调回开始的位置 */
function audioEnded() {
  $('#progressBar').css('width', 0);
  $('#progressDot').css('left', 0);
  $('#audioPlayer').attr('src', '../images/play.png');
  $('#audioCurTime').html("00:00");
  $('#audioPlay').attr('src', '../images/play2.png');
}


  // 监听音频播放时间并更新进度条
  audio.addEventListener('timeupdate', function () {
    updateProgress(audio);
  }, false);

  /** * 更新进度条与当前播放时间 * @param {object} audio - audio对象 */
  function updateProgress(audio) {
  $.post(
          "/music/user/isVip",{},function (data){
            console.log(data)
              //if (data.flag){
              if (true){
                var value = audio.currentTime / audio.duration;
                $('#progressBar').css('width', value * 100 + '%');
                $('#progressDot').css('left', value * 100 + '%');
                $('#audioCurTime').html(transTime(audio.currentTime));
              }
              else {

                if (audio.currentTime>=30){
                  audioEnded();
                  audio.currentTime=0;
                  audio.pause()
                  alert(data.errorMsg)
                }else {
                  var value = audio.currentTime / audio.duration;
                  $('#progressBar').css('width', value * 100 + '%');
                  $('#progressDot').css('left', value * 100 + '%');
                  $('#audioCurTime').html(transTime(audio.currentTime));
                }
              }
          }
  )


  }

  /** * 音频播放时间换算 * @param {number} value - 音频当前播放时间，单位秒 */
  function transTime(value) {
    var time = "";
    var h = parseInt(value / 3600);
    value %= 3600;
    var m = parseInt(value / 60);
    var s = parseInt(value % 60);
    if (h > 0) {
      time = formatTime(h + ":" + m + ":" + s);
    } else {
      time = formatTime(m + ":" + s);
    }
    return time;
  }

  /** * 格式化时间显示，补零对齐 * eg：2:4 --> 02:04 * @param {string} value - 形如 h:m:s 的字符串 */
  function formatTime(value) {
    var time = "";
    var s = value.split(':');
    var i = 0;
    for (; i < s.length - 1; i++) {
      time += s[i].length == 1 ? ("0" + s[i]) : s[i];
      time += ":";
    }
    time += s[i].length == 1 ? ("0" + s[i]) : s[i];
    return time;
  }

  // 监听播放完成事件
  audio.addEventListener('ended', function () {
    audioEnded();
  }, false);


  // 点击进度条跳到指定点播放
  // PS：此处不要用click，否则下面的拖动进度点事件有可能在此处触发，此时e.offsetX的值非常小，会导致进度条弹回开始处（简直不能忍！！）
  $('#progressBarBg').on('mousedown', function (e) { // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
    if (!audio.paused || audio.currentTime !== 0) {
      var pgsWidth = $('.progress-bar-bg').width();
      var rate = e.offsetX / pgsWidth;
      audio.currentTime = audio.duration * rate;
      updateProgress(audio, index);
    }
  });

  var dot = document.getElementById('progressDot');
  // 鼠标拖动进度点时可以调节进度
  // 只有音乐开始播放后才可以调节，已经播放过但暂停了的也可以
  // 鼠标按下时
  dot.onmousedown = function (e) {
    if (!audio.paused || audio.currentTime != 0) {
      var oriLeft = dot.offsetLeft;
      var mouseX = e.clientX;
      var maxLeft = oriLeft; // 向左最大可拖动距离
      var maxRight = document.getElementById('progressBarBg').offsetWidth - oriLeft; // 向右最大可拖动距离

      // 禁止默认的选中事件（避免鼠标拖拽进度点的时候选中文字）
      if (e.preventDefault) {
        e.preventDefault();
      } else {
        e.returnValue = false;
      }

      // 禁止事件冒泡
      if (e && e.stopPropagation) {
        e.stopPropagation();
      } else {
        window.event.cancelBubble = true;
      }

      // 开始拖动
      document.onmousemove = function (e) {
        var length = e.clientX - mouseX;
        if (length > maxRight) {
          length = maxRight;
        } else if (length < -maxLeft) {
          length = -maxLeft;
        }
        var pgsWidth = $('.progress-bar-bg').width();
        var rate = (oriLeft + length) / pgsWidth;
        audio.currentTime = audio.duration * rate;
        updateProgress(audio);
      };

      // 拖动结束
      document.onmouseup = function () {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    }
  };

</script>
</html>